<template>
  <view class="container">
    <!-- 上半部分背景图片 -->
    <view class="header-background">
      <!-- 搜索栏 -->
      <view class="search-bar">
        <input class="search-input" placeholder="搜索疾病、症状" />
        <image class="search-icon" :src="lunboImages[0]" />
      </view>
		
      <!-- 找医生 & 看科普 模块按钮 -->
      <view class="main-buttons">
        <view class="button-item doctor-button">
          <text class="text-title">找医生</text>
          
          <!-- 新增一个容器包裹副标题和图标 -->
          <view class="subtitle-icon-container">
            <text class="text-subtitle">专业三甲名医服务</text>
            <image class="icon-image" :src="lunboImages[1]" mode="aspectFill" />
          </view>
        </view>
        
        <view class="button-item info-button">
          <text class="text-title">看科普</text>
          
          <!-- 新增一个容器包裹副标题和图标 -->
          <view class="subtitle-icon-container">
            <text class="text-subtitle">科普文章系列</text>
            <image class="icon-image" :src="lunboImages[2]" mode="aspectFill" />
          </view>
        </view>

      </view>

		<!-- 对症寻医 标题 -->
		    <view class="section-title">
		      <text class="section-title-text">对症寻医</text>
		    </view>
	  
	  <!-- 疾病类别选择 -->
	  <view class="category-list">
	    <view class="category-item" v-for="item in categories" :key="item.id">
			<view class="icon-background">
				<image :src="item.icon" mode="aspectFill" />
			</view>
	      
	      <text>{{ item.name }}</text>
	    </view>
	  </view>
	  
    </view>

    <!-- 推荐医生 标题 -->
        <view class="section-title-doctor">
          <text class="section-title-text">推荐医生</text>
        </view>


    <!-- 推荐医生列表，横向滚动部分 -->
    <scroll-view class="doctor-scroll" scroll-x="true" scroll-with-animation="true">
          <view class="doctor-item" v-for="doc in doctors" :key="doc.id">
            <view class="doctor-card">
              <image class="doctor-avatar" :src="doc.imageUrl" mode="aspectFill" />
              <view class="doctor-info">
                <!-- 医生姓名 -->
                <text class="doctor-name">{{ doc.doctorName }}</text>
				<!-- 医院信息 -->
				<text class="doctor-hospital">{{ doc.hospital.name }}</text>
                <!-- 医生职位和科室 -->
                <text class="doctor-title">{{ doc.doctorTitle }} - {{ doc.department }}</text>
                <!-- 医生描述 -->
                <view class="doctor-specialty-background">
                  <text class="doctor-specialty">擅长：{{ truncateText(doc.description, 14) }}</text>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
  </view>
</template>



<script>
export default {
  data() {
    return {
		lunboImages: [],  // 用来存放云存储图片的URL数组
      // 疾病类别列表
      categories: [
        { id: 1, icon: '', name: '躁郁症' },
        { id: 2, icon: '', name: '失眠障碍' },
        { id: 3, icon: '', name: '应激障碍' },
        { id: 4, icon: '', name: '惊恐症' },
        { id: 5, icon: '', name: '人格障碍' },
        { id: 6, icon: '', name: '妄想症' },
        { id: 7, icon: '', name: '疑心症' },
        { id: 8, icon: '', name: '自闭症' },
        { id: 9, icon: '', name: '情感障碍' },
        { id: 10, icon: '', name: '焦虑障碍' }
      ],
      // 推荐医生列表
	  doctors: [
	    {
	      id: 1,
	      imageUrl: '',
	      doctorName: '郑志军',
	      doctorTitle: '主任医师',
		  department: '心理精神科',
	      hospital: {
	        name: '聊城市第四人民医院',
	        type: '三甲',
	      },
	      description: '恐惧症、抑郁症、强迫症、成瘾疾病、焦虑症、睡眠障碍等。',
	      price: 25,
	    },
	    {
	      id: 2,
	      imageUrl: '',
	      doctorName: '江瑞春',
	      doctorTitle: '主任医师',
		  department: '临床心理科',
	      hospital: {
	        name: '上海市第十人民医院',
	        type: '三甲',
	      },
	      description: '情感障碍、神经症、心身疾病、认知功能障碍、强迫症等。',
	      price: 15,
	    },
		{
		  id: 3,
		  imageUrl: '',
		  doctorName: '温传营',
		  doctorTitle: '主治医师',
		  department: '心理精神科',
		  hospital: {
		    name: '上海市第十人民医院',
		    type: '三甲',
		  },
		  description: '情感障碍、神经症、心身疾病。',
		  price: 15,
		},
	    // 可以添加更多医生数据
	  ],
	  };
    },
	mounted() {
		this.getLunboImages();
	},
	methods:{
		truncateText(text,length){
			return text.length > length ? text.substring(0,length) + '...' : text;
	},
	getLunboImages() {
	    const fileIDs = [
	      'cloud://cloud1-0g395u88659d19b8.636c-cloud1-0g395u88659d19b8-1350871341/static/icons/search.png',
		  'cloud://cloud1-0g395u88659d19b8.636c-cloud1-0g395u88659d19b8-1350871341/static/icons/medical/doctor(1).png',
		  'cloud://cloud1-0g395u88659d19b8.636c-cloud1-0g395u88659d19b8-1350871341/static/icons/medical/info(1).png',
		  'cloud://cloud1-0g395u88659d19b8.636c-cloud1-0g395u88659d19b8-1350871341/static/icons/medical/zaoyuzheng.png',
		  'cloud://cloud1-0g395u88659d19b8.636c-cloud1-0g395u88659d19b8-1350871341/static/icons/medical/shimian.png',
		  'cloud://cloud1-0g395u88659d19b8.636c-cloud1-0g395u88659d19b8-1350871341/static/icons/medical/yingji.png',
		  'cloud://cloud1-0g395u88659d19b8.636c-cloud1-0g395u88659d19b8-1350871341/static/icons/medical/jingkong.png',
		  'cloud://cloud1-0g395u88659d19b8.636c-cloud1-0g395u88659d19b8-1350871341/static/icons/medical/renge.png',
		  'cloud://cloud1-0g395u88659d19b8.636c-cloud1-0g395u88659d19b8-1350871341/static/icons/medical/wangxiang.png',
		  'cloud://cloud1-0g395u88659d19b8.636c-cloud1-0g395u88659d19b8-1350871341/static/icons/medical/yixin.png',
		  'cloud://cloud1-0g395u88659d19b8.636c-cloud1-0g395u88659d19b8-1350871341/static/icons/medical/zibi.png',
		  'cloud://cloud1-0g395u88659d19b8.636c-cloud1-0g395u88659d19b8-1350871341/static/icons/medical/shuangxiangqinggan.png',
		  'cloud://cloud1-0g395u88659d19b8.636c-cloud1-0g395u88659d19b8-1350871341/static/icons/medical/jiaolv.png',
		  'cloud://cloud1-0g395u88659d19b8.636c-cloud1-0g395u88659d19b8-1350871341/static/images/doctor1.png',
		  'cloud://cloud1-0g395u88659d19b8.636c-cloud1-0g395u88659d19b8-1350871341/static/images/doctor2.png',
		  'cloud://cloud1-0g395u88659d19b8.636c-cloud1-0g395u88659d19b8-1350871341/static/images/doctor1-listen.png',
	    ];
	    
	    // 获取每个图片的临时 URL
	    wx.cloud.getTempFileURL({
	      fileList: fileIDs.map(fileID => ({ fileID })),
	      success: res => {
	        console.log('临时URL：', res.fileList);
	        this.lunboImages = res.fileList.map(item => item.tempFileURL);  // 存储临时URL

			this.categories[0].icon = this.lunboImages[3];
			this.categories[1].icon = this.lunboImages[4];
			this.categories[2].icon = this.lunboImages[5];
			this.categories[3].icon = this.lunboImages[6];
			this.categories[4].icon = this.lunboImages[7];
			this.categories[5].icon = this.lunboImages[8];
			this.categories[6].icon = this.lunboImages[9];
			this.categories[7].icon = this.lunboImages[10];
			this.categories[8].icon = this.lunboImages[11];
			this.categories[9].icon = this.lunboImages[12];
			
			this.doctors[0].imageUrl = this.lunboImages[13];
			this.doctors[1].imageUrl = this.lunboImages[14];
			this.doctors[2].imageUrl = this.lunboImages[15];
	      },
	      fail: err => {
	        console.error('获取图片失败:', err);
	      }
	    });
	  }
  },
};
</script>



<style scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header-background {
  top: 0;
  left: 0;
  width: 100%;
  height: 350px;
  background-image: url('/static/images/background1.png'); /* 使用绝对路径 */
  background-size: cover;
  background-position: left top;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  padding: 60px 0 0 0; /* 增加上边距，整体向下移动 */
  margin: 0;
}
.search-bar{
	display: flex;
	width: 90%;
	align-items: center;
	margin-top: 80px;
	background-color: #fff;
	border-radius: 10px;
	padding: 10px;
}



.search-input{
	flex: 1;
	border: none;
	
	font-size: 16px;
	padding-left: 10px;
}

.search-icon{
	width: 20px;
	height: 20px;
}


/* 设置两个按钮的整体布局 */
.main-buttons {
  display: flex;
  justify-content: space-between;
  gap:15px;
  margin: 20px;
	width: 90%; 
}

/* 找医生和看科普按钮的布局 */
.button-item {
  width: 48%;
  height: auto; /* 自适应高度 */
  text-align: left;
  padding: 10px 15px;
  border-radius: 10px;
  display: flex;
  flex-direction: column; /* 垂直排列主标题和副标题部分 */
  justify-content: space-between;
  position: relative;
}

/* 找医生按钮的渐变背景 */
.doctor-button {
  background: linear-gradient(to right, #fac95f, #feb051); /* 渐变背景：左浅右深 */
}

/* 看科普按钮的渐变背景 */
.info-button {
  background: linear-gradient(to right, #4ce894, #29e4a9); /* 渐变背景：左浅右深 */
}

/* 副标题和图标容器 */
.subtitle-icon-container {
  display: flex;
  flex-direction: row;  /* 将副标题和图标水平排列 */
  align-items: center;  /* 副标题和图标垂直居中对齐 */
  justify-content: space-between; /* 副标题靠左，图标靠右 */
  margin-top: 5px;
  width: 100%; /* 占满可用宽度 */
}

/* 标题文字 */
.text-title {
  font-size: 20px;
  font-family: cursive;
  font-weight: bold;
  color: white;
  margin-bottom: 10px;
}

/* 副标题文字 */
.text-subtitle {
  font-size: 15px;
  color: white;
  margin-right: 10px; /* 副标题和图标之间留出空隙 */
  max-width: 55%;  /* 限制文字最大占据宽度 */
  flex-grow: 1; /* 使副标题占用多余空间，防止挤压到图标 */
  word-wrap: break-word; /* 超出宽度时换行 */
}

/* 新增部分 - 标题样式 */
.section-title {
  width: 90%;
  margin: 10px auto 10px auto;
  display: flex;
  justify-content: flex-start;
}

/* 新增部分 - 标题样式 */
.section-title-doctor {
  width: 90%;
  margin: 70px auto 0px auto;
  display: flex;
  justify-content: flex-start;
}

.section-title-text {
  font-size: 15px;
  font-weight: bold;
  color: #333;
}

/* 图标样式 */
.icon-image {
  width: 50px;
  height: 50px;
  flex-shrink: 0; /* 防止图标被挤压 */
}


/* 疾病类别外部容器，添加边框和圆角 */
.category-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 85%;
  gap: 10px;
  padding: 10px;
  border-radius: 10px; /* 圆角边框 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

/* 疾病类别项目 */
.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 圆形图标背景容器 */
.icon-background {
  background-color: #5bb8ac; /* 设置背景颜色为绿色 */
  border-radius: 50%; /* 设置为圆形 */
  width: 40px; /* 调整宽度 */
  height: 40px; /* 调整高度 */
  display: flex;
  justify-content: center;
  align-items: center; /* 图标居中 */
   margin: 0 auto 5px auto; /* 使背景容器在水平方向居中 */
  z-index: 1; /* 确保背景层级高于其他元素 */
}

/* 图标样式 */
.category-item image {
  width: 30px;
  height: 30px;
  z-index: 2; /* 图标层级高于背景 */
}

.category-item text {
  font-size: 14px;
  color: #333333;
  text-align: center;
}


/* 横向滚动的样式 */
.doctor-scroll {
	margin-top: 0px;
  white-space: nowrap; /* 保证内容不会换行 */
  padding: 10px;
}

/* 推荐医生列表 */
.doctor-list {
  display: flex;
  flex-direction: column;
  margin-top: 0px;
  padding: 10px;
}


.doctor-item {
  display: inline-block; /* 确保每个医生卡片是独立的一块内容 */
  vertical-align: top; /* 保证每个卡片在顶部对齐 */
  margin-right: 40px; /* 设置每个卡片之间的间距 */
  width: 130px; /* 卡片的宽度可以根据需求调整 */
}

.doctor-card {
  width: 130px; /* 固定卡片宽度 */
  height: 240px; /* 固定卡片高度 */
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.doctor-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.doctor-info {
  text-align: center;
}

.doctor-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}
.doctor-info text {
  display: block; /* 确保每个 text 元素占据一行 */
  margin-bottom: 5px; /* 添加一些 margin 来增加文字之间的间距 */
  word-wrap: break-word; /* 超出宽度时换行 */
}

.doctor-title {
  font-size: 13px;
  color: #666666;
  margin-bottom: 5px;
}

.doctor-hospital {
  font-size: 12px;
  color: #888888;
  margin-bottom: 10px;
}
.doctor-specialty-background {
  background-color: #5bb8ac; /* 绿色背景 */
    padding: 10px;
    border-radius: 5px;
    flex-grow: 1; /* 让绿色区域占据卡片的剩余空间 */
    display: flex;
    align-items: center;
    justify-content: center; /* 文字在垂直居中 */
}
.doctor-specialty {
  font-size: 14px;
  color: white;
  white-space: pre-wrap; /* 保证描述文字自动换行 */
}
</style>

